<template>
<div class="xx_page" :style="'height:calc(100% - '+ keyHeight +'px)'">
  <div class='nav'>
    <div class="input_view flex_ac" @click="$back() ">
      <van-icon class="ml6" name="arrow-left" size="26" color="#000"/>
      <div class="nav_title">{{to_info.name||'私信'}}</div>
    </div>
	</div>
  <div class="h50"></div>
	<div>
		<div id='msgdiv'>
			<div class="chat_item flex" :class="i.id==info.id?'flex_row':''" v-for="(i,k) in message" :key='k'>
				<img class='avatar' :src="i.avatar||'http://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/qiji/dzmp_avatar.png'" />
				
				<div class="">
					<div class="time">{{i.create_time}}</div>
					<div v-if="i.id!=info.id" class="huifu">{{i.value}}</div>	
					<div v-else class="huifu_user">{{i.value}}</div>	
				</div>
			</div>
			<div class="h20"></div>
		</div>
	</div>
	<div class="bottom flex_sb flex_ac">
		<div class="input">
			<input type="textarea" placeholder="请输入内容" confirm-type='send' @confirm='sendMsg' v-model="keywords" :adjust-position='false' @focus='changeHeight' @blur='(e)=>{keyHeight = 0}'/>
		</div>
		<div class="send_btn" @click='sendMsg'>发送</div>
	</div>
</div>
</template>

<script>
	// import {  } from '@/utils/api.js'
	export default {
		data() {
			return {
        message: [
          {avatar:'',value:'你好',id:1,create_time:'2024-01-01 12:00:01'},
          {avatar:'',value:'你好',id:2,create_time:'2024-01-02 12:00:01'},
        ],
				keyHeight:0,
				keywords:'',
				info:{avatar:'',id:1},
				to_info:{avatar:'',id:2},
				scrollTop:0,
				
				to_id:'',
				
				socketOpen:false,
				msgdate:'',
				heartbeat:null
			}
		},
		components:{
		},
		mounted(){
		},
		methods: {
			changeHeight(e){
				this.keyHeight = e.detail.height
			}, 
			sendMsg() {
				
			}
		}
	}
</script>

<style lang="scss" scoped>
.nav{
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
  height: 40px;
	background-color: rgba($color: #fff, $alpha: 1);
	z-index: 10;
	transition: all 0.5s;
}
.input_view{
	width: 100%;
  height: 100%;
	.nav_title{
		font-weight: 500;
		font-size: 18px;
		color: #000;
	}
}

.xx_page{
	width: 100%;
	height: 100%;
	overflow: auto;
	position: relative;
	background: #F7F7F7;
	.img_bg{
		position: absolute;
		width:100%;
		height:100%;
		left:0;
		top:0;
	}
	.main{
		height:calc(100% - 64px);
		position: relative;
		z-index:2
	}
	.bottom{
		position: absolute;
		bottom: 0;
		left: 0;
		width: calc(100% - 20px);
		padding: 0 10px;
		height: 64px;
		background: #FFFFFF;
	}
	.input{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 10px;
		height: 33px;
		overflow: hidden;
		background: #f4f4f4;
		box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.1), 0px -1px 3px 0px rgba(0,0,0,0.1);
		border-radius: 3px;
		width: calc(100% - 90px);
		input{
			width: 100%;
			height:100%;
			background: #fff0;
			border-radius: 5px;
			padding-left: 5px;
			border: none;
			font-size: 14px;
		}
	}
	.send_btn{
		width: 60px;
		height: 33px;
		background: linear-gradient(-62deg, #FA871E, #F9B87D);
		border-radius: 3px;
		text-align: center;
		line-height: 33px;
		color: #fff;
		font-size: 14px;
		&:hover{
			opacity: 0.85;
		}
	}
	.chat_item{
		padding: 10px; 
		.avatar{
			width:40px;
			height:40px;
			border-radius: 3px;
			margin-right: 10px;
		}
	}
	.flex_row{
		flex-direction: row-reverse;
		.avatar{
			margin-right: 0;
			margin-left: 10px;
		}
	}
	.huifu{
		float: left;
		color:#232323;
		padding: 7.5px 10px;
		word-wrap: break-word;
		max-width: calc(100% - 50px);
		display: inline-block;
		display: flex;
		flex-wrap: wrap;
		font-size: 14px;
		white-space: pre-wrap;
		position: relative;
		line-height: 25px;
		
		background: #FAFAFA;
		box-shadow: 0px 1px 3px 0px #0002, 0px -1px 3px 0px #0002;
		border-radius: 3px 10px 10px 10px ;
	}
	.huifu_item{
		display: inline-block;
		line-height: 25px;
	}
	.hang{
		display: inline-block;
		width: calc(100vw - 50px);
		height:3px;
	}
	.time{
		font-size: 12px;
		color: #999999;
		margin-bottom: 5px;
	}
	.huifu_user{
		float: right;
		word-wrap: break-word;
		max-width: calc(100% - 50px);
		display: inline-block;
		font-size: 14px;
		white-space: pre-wrap;
		color:#fff;
		padding: 8px;
		line-height: 25px;
		position: relative;
		
		background: linear-gradient(-62deg, #FA871E, #F9B87D);
		box-shadow: 0px 2px 3px 0px #FA871E44, 0px -2px 3px 0px #FA871E44;
		border-radius: 10px 3px 10px 10px ;
	}
	.tel{
		color: #1a94ff;
	}
	
	@keyframes cursor{
		0%{
			height: 10px;
			opacity: 0.3;
		}
		50%{
			height: 16px;
			opacity: 1;
		}
		100%{
			height: 10px;
			opacity: 0.3;
		}
	}
	.gb_div{
		display: inline-block;
		height: 25px;
		width: 3px;
		margin-left: 5px;
	}
	.gb{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 25px;
		width: 100%;
		.gb_i{
			display: inline-block;
			height: 16px;
			width: 100%;
			background-color: #000;
			animation: cursor 0.4s infinite;
		}
	}
}
</style>
